/**
 * 组件名称：设备概览图组件
 * 使用场景：描述一台设备的外形
 * 功能介绍：各个槽位的布局，代表设备面板构成；各个槽位点击后，右侧显示对应的槽位信息（板卡+端口）
 * 功能进度：10%
 * 待办事项：联动功能、以及测试各种设备是否都能用这个模型来展示
 */

import {Text, Fieldset, Button, Stack, Group} from "@mantine/core";

interface SlotProps {
  id: number;
  name: string;
}

interface SlotLayoutProps {
  id: number;
  type: string;
  slots: SlotProps[];
}

const SlotGroupRender = ({data}: {data: SlotProps[]}) => {
  return (
    <Group gap={1} grow>
      {data.map((item) => (
        <Button key={item.id} variant="default" size="compact-xs" radius="xs" h={180} w={30}>
          <Text size="xs">{item.id}</Text>
        </Button>
      ))}
    </Group>
  );
};

const SlotStackRender = ({data}: {data: SlotProps[]}) => {
  return (
    <Stack gap={1}>
      {data.map((item) => (
        <Button key={item.id} variant="default" size="compact-xs" radius="xs" h={30}>
          <Text size="xs">{item.name}</Text>
        </Button>
      ))}
    </Stack>
  );
};

export const IpdDevice = ({name, data}: {name: string; data: SlotLayoutProps[]}) => {
  return (
    <Fieldset legend={name} miw={350}>
      <Stack gap={3}>
        {data.map((item) =>
          item.type === "group" ? (
            <SlotGroupRender key={item.id} data={item.slots} />
          ) : (
            <SlotStackRender key={item.id} data={item.slots} />
          ),
        )}
      </Stack>
    </Fieldset>
  );
};
